<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item>
        <el-form-item label="楼栋">
          <el-cascader :options="houseFloor" clearable v-model="selectedCascaderValue"
            @change="handleCascaderChange"></el-cascader>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>




     <div class="Jcommon-layout-main Jflex-main">
                <div class="Jcommon-head">
                    <div class="tips">
                        <div class="tips-item">
                            <span class="icon empty">●</span>
                            空置
                        </div>
                        <div class="tips-item">
                            <span class="icon rented">●</span>
                            已出租
                        </div>
                        <div class="tips-item">
                            <span class="icon selled">●</span>
                            已出售
                        </div>
                        <div class="tips-item">
                            <span class="icon warn">●</span>
                            即将到期
                        </div>
                        <div class="tips-item">
                            <span class="icon error">●</span>
                            租约逾期
                        </div>
                    </div>
                </div>

                <div style="overflow-y: scroll">
                    <div>
                        <div v-if="key.length == 0" style="padding-left:30px;">
                            商铺信息为空，请选择其他楼栋进行查询
                        </div>
                        <div v-else class="floorDiv" v-for="item in key" :key="item.id">
                            <div class="floorInfo">{{ item }}层</div>
                            <div style="flex: 1; display: flex; flex-wrap: wrap">
                                <div class="houseDiv" v-for="(item1) in list[item]" :key="item1.id" @click="handleClick(item1)">
                                    <div class="header" :class="'a'+item1.shopsState + '-background'">
                                        <div class="title-box">{{ item1.shopsCode }}（{{ item1.shopSUserArea }}㎡）</div>
                                    </div>
                                    <div class="body">
                                        <div v-if="item1.shopsState == 0" class="text">空置</div>
                                        <div v-else-if="item1.shopsState == 2" class="text">
                                            {{item1.hirerCompany}}
                                            <br/>
                                            已出售
                                        </div>
                                        <div v-else class="text">
                                            {{item1.hirerCompany}}
                                            <br/>
                                            {{ parseTime(item1.endTime, '{y}-{m}-{d}') }}到期
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </div>




     <!-- 添加或修改商铺信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item  label="业主姓名">
          <el-input :disabled="true" v-model="form.hirerName"></el-input>
        </el-form-item>

        <el-form-item label="业主公司" >
          <el-input :disabled="true" v-model="form.hirerCompany" />
        </el-form-item>
        <el-form-item label="编号" >
          <el-input :disabled="true" v-model="form.shopsCode" />
        </el-form-item>
        <!-- <el-form-item label="租金" >
          <el-input :disabled="true" v-model="form.rent"/>
        </el-form-item> -->
        <el-form-item label="开始时间" >
          <el-input :disabled="true" v-model="form.startTime"/>
        </el-form-item>
       
        <el-form-item label="备注">
          <el-input :disabled="true" v-model="form.remark" type="textarea" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open=false">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>







  </div>



</template>

<script>
import { getMap, getRentalcontract } from "@/api/feeSettings/rentalcontract";
import {
    listShops,
    getShops,
    delShops,
    addShops,
    updateShops,
    getShopsByDid
  } from "@/api/asset/shops";
  import {
    listBuilding,
    getBuilding
  } from "@/api/asset/building";
  import {
    listDowntown,
    getDowntown
  } from "@/api/asset/downtown";
  import {
    listHirer,
    getHirer
  } from "@/api/hirer/hirer";

export default {
  name: "Tongji",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商铺信息表格数据
      shopsList: {
        key:[],
        list:[]
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        state: null,
      },
        // 查询参数
      DQueryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        address: null,
      },
      allCode:'',
      // 表单参数
      form: {
        dbName:[]
      },
      // 表单校验
      rules: {
      },
      key:[],
      list:[],
      houseFloor: [],
      selectedCascaderValue: [1,1],
      rtList:[]
    };
  },
  created() {
    this.fetchData()
    this.getList()
  },
  methods: {
    handleClick(row){
      console.log(row.id);
      this.open=true
      getRentalcontract(row.id).then(res=>{
        console.log(res);
        this.form=res.data

      })
    },
    getSelectedCascaderValue() {
        return this.selectedCascaderValue;
      },
     handleCascaderChange(value) {
        // console.log('选中的级联值:', value);
        this.form.downtownId = value[0],
          this.form.buildingId = value[1]
      },
      fetchData() {
        // 获取商业区数据
        listDowntown(this.queryParams).then(response => {
          this.DowntownList = response.rows;
          this.processDowntownData();
        });
      },
      processDowntownData() {
        this.cascaderOptions = this.DowntownList.map(item => ({
          value: item.id,
          label: item.name,
          children: []
        }));

        listBuilding(this.queryParams).then(response => {
          this.BuildingList = response.rows;
          this.processBuildingData();
        });
      },
      processBuildingData() {
        this.BuildingList.forEach(building => {
          const downtown = this.cascaderOptions.find(item => item.value === building.downtownId);
          if (downtown) {
            downtown.children.push({
              value: building.id,
              label: building.name
            });
          }
        });

        // 可以将其设置为 el-cascader 的 options
        this.houseFloor = this.cascaderOptions;
        // console.log(this.houseFloor);
      },

       /** 查询租赁统计列表 */
    getList() {
      console.log(this.selectedCascaderValue[0]);
      console.log(this.selectedCascaderValue[1]);
       getMap(this.selectedCascaderValue[0],this.selectedCascaderValue[1]).then(response => {
        console.log(response);
        this.shopsList=response
        this.key = response.key;
        this.list=response.list
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        room: null,
        floor: null,
        floorArea: null,
        useArea: null,
        rentFree: null,
        state: null,
        dId: null,
        bId: null,
        remark: null,
        deleted: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};

</script>
<style scoped lang="scss">
.cardhead .point{
  margin-left: 10px;
}
.shopcard{
  display: flex;
  margin-bottom: 10px;

}

.shopcard .leftfloor{
  width: 50px;
  height: 50px;
  border: solid 1px #ccc;
  margin: 10px auto;
  line-height: 50px;
  box-shadow: #ccc 5px 5px ;
}
.shopcard .shopInfo{
  display: flex;
  /*justify-content: space-around;*/
  flex-wrap: wrap;
}

.shopcard .headone{
  width: 250px;
  height: 40px;
  background-color: #909399;
  margin-bottom: 5px;
}
.shopcard .headtwo{
  width: 250px;
  height: 40px;
  background-color: #1890ff;
  margin-bottom: 5px;
}
.shopcard .headthree{
  width: 250px;
  height: 40px;
  background-color: #20B2AA;
  margin-bottom: 5px;
}
.shopcard .headfore{
  width: 250px;
  height: 40px;
  background-color: #E6A23C;
  margin-bottom: 5px;
}
.shopcard .headfive{
  width: 250px;
  height: 40px;
  background-color: #f56c6c;
  margin-bottom: 5px;
}
.shopcard .carddown{
  margin-left: 10px;
}

.shopcard .box-card{
  /*margin-bottom: 5px;*/
  --n: 4;
  --gap: calc((100% - 250px * var(--n)) / var(--n) / 2);
  margin: 10px var(--gap);
  border-radius: 5px;
}
.empty {
    color: #909399;
}
.rented {
    color: #1890ff;
}
.selled {
    color: #20b2aa;
}
.warn {
    color: #e6a23c;
}
.error {
    color: #f56c6c;
}
.a0-background {
    background-color: #909399 !important;
}
.rented-background {
    background-color: #1890ff !important;
}
.a2-background {
    background-color: #20b2aa !important;
}
.warn-background {
    background-color: #e6a23c !important;
}
.error-background {
    background-color: #f56c6c !important;
}
.tips {
    margin-left: 20px;
    margin-bottom: 20px;
    text-align: left;
    .tips-item {
        line-height: 20px;
        font-size: 16px;
        display: inline-block;
        margin-right: 15px;
        .icon {
            font-size: 20px;
        }
    }
}

.floorDiv {
    display: flex;

    .floorInfo {
        height: 70px;
        width: 70px;
        line-height: 70px;
        text-align: center;
        border: 1px solid #ccc;
        box-shadow: 5px 5px 2px #ccc;
        margin-right: 35px;
        margin-left: 20px;
    }

    .houseDiv {
        width: 210px;
        min-height: 82px;
        font-size: 12px;
        border-radius: 4px;
        text-align: left;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
        background-color: #fff;
        margin-bottom: 15px;
        margin-right: 15px;

        .header {
            background-color: #1890ff;
        }

        .header {
            padding-left: 16px;
            padding-right: 30px;
            width: 100%;
            height: 24px;
            line-height: 24px;
            color: white;
            position: relative;
            box-sizing: border-box;

            .title-box {
                position: relative;
                display: inline-block;
            }
        }

        .body {
            position: relative;
            padding: 12px;
            padding-right: 30px;
            box-sizing: border-box;

            .text {
                margin: 0;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>
